<template>
     <!-- <div class="block"> -->
    <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
     <el-carousel :interval="5000" style="height: 3.2rem;" arrow="always">
    <el-carousel-item v-for="item in 4" :key="item">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
data(){
        return{
            imgs:["../../assets/img/img02.png",
                "../../assets/img/img3.png",
                "../../assets/img/img4.png",
                "../../assets/img/img5.png",
                "../../assets/img/img02.png",
                "../../assets/img/img4.png",
            ]
        }
    }
}
</script>

<style scoped>
/deep/ .el-carousel__container{
    height: 3.2rem;
}
/deep/.el-carousel__button{
    height: .2rem;
    width: .2rem;
    border-radius: 50%;
}
/deep/.el-carousel__button{
    background-color: orange;;
}
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  .el-carousel__item:nth-of-type(1){
      background:url(../../assets/img/img02.jpg) no-repeat;
      background-size: 100% 100%;
  }
  .el-carousel__item:nth-of-type(2){
      background:url(../../assets/img/img3.jpg) no-repeat;
      background-size: 100% 100%;
  }
  .el-carousel__item:nth-of-type(3){
      background:url(../../assets/img/img4.jpg) no-repeat;
      background-size: 100% 100%;
  }
  .el-carousel__item:nth-of-type(4){
      background:url(../../assets/img/img5.jpg) no-repeat;
      background-size: 100% 100%;
  }
</style>